第六階段開始，今天要把 SyncETA Lite 從 localhot 搬到真實網路上，讓任何人都能透過網址使用。

為什麼選 Vercel？

對初學者來說，Vercel 有幾個明顯優點：

• 直接串接 GitHub，推送程式碼即自動部署，不用手動上傳檔案。
• 預設提供 HTTPS，符合 PWA 的必要條件（回顧 Day 4）。
• 免費方案對個人專案 / 課堂作業已經很足夠。

部署前的準備

1. 先把 syncetalite-pwa/ 專案推送到 GitHub：

cd syncetalite-pwa
git init
git add .
git commit -m "SyncETA Lite v1"
git remote add origin <你的GitHub repo網址>
git push -u origin main

2. 再三確認 .env 有被 .gitignore 排除，避免金鑰外洩：

# .gitignore
node_modules
dist
.env

在 Vercel 上部署

1. 前往 https://vercel.com/ 用 GitHub 帳號登入。
2. 選擇「Import Project」，選取剛剛推送的 repo。
3. Vercel 會自動偵測到這是 Vite 專案，建置指令與輸出資料夾通常會自動帶入（npm run build，輸出到 dist/）。
4. 在 Environment Variables 設定頁面，把 .env 裡的三組金鑰重新輸入一次（TDX Client ID / Secret、Google Maps API Key）。
5. 點擊 Deploy，等待幾十秒，就會拿到一組正式網址，例如 syncetalite-pwa.vercel.app。

部署後的檢查清單

• 打開正式網址，確認地圖、即時資料、推薦邏輯都正常運作（不是只有本機能跑）。
• 用手機瀏覽器打開，測試「加入主畫面」是否正常。
• 回到 Google Cloud Console，把 Maps API 金鑰的網站限制，加入正式網址網域（不然上線後金鑰會被擋掉）。

明天，我們要用瀏覽器內建工具，檢視這個 PWA 上線後的實際效能表現，並討論值得優化的地方。